<template>
  <nut-collapse class="su-nested-collapse" @change="change">
    <template v-for="item in modelValue" :key="item[nameKey]">
      <nut-collapse-item
        v-if="!isEmpty(item[childrenKey])"
        :name="item[nameKey]"
        :title="item[titleKey]"
        :label="item[labelKey]"
        :value="item[valueKey]"
        :icon="item.icon"
        :rotate="item.rotate"
        :disabled="item.disabled"
        :border="item.border"
      >
        <template #default>
          <!-- 递归渲染 SuNestedCollapse -->
          <SuNestedCollapse
            :model-value="item[childrenKey]"
            :props="props.props"
            :change="change"
            :click="click"
          />
        </template>
      </nut-collapse-item>

      <!-- 如果 item 没有 children，则渲染一个普通的 view -->
      <view v-else class="su-nested-collapse__item" @click="click(item)">
        {{ item[titleKey] }}
      </view>
    </template>
  </nut-collapse>
</template>

<script setup>
import { DIC_PROPS } from '@/supreme/core/enums';
import { useCommonProps } from '@/supreme/core/props';
import { isEmpty } from 'lodash-es';
defineOptions({
  name: 'SuNestedCollapse'
});
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  props: {
    type: Object,
    default: () => DIC_PROPS
  },
  change: {
    type: Function,
    default: undefined
  },
  click: {
    type: Function,
    default: () => {}
  }
});
const { nameKey, titleKey, labelKey, valueKey, childrenKey } = useCommonProps(props);
</script>
<style lang="scss">
.su-nested-collapse {
  .nut-collapse__item-wrapper__content {
    padding: 0;
  }
}
</style>
